<template>
  <div style="display:flex;flex-direction:column;height:100%;">
    <!-------------------------------------------------------顶部查询项-->
    <div style="flex-shrink: 1;flex-grow: 0;padding-bottom: 5px">
      <el-form ref="searchForm" label-width="100px" :model="searchData" @submit.native.prevent
               @keyup.enter.native="getData('page')" style="max-height: 124px;overflow-y: auto;">
        <el-row>
          <!--    查询项固定每行4个-->
          <el-col :span="6" v-for="(item, index) in realSearchConf" :key="index" v-if="!isCollapse || index < 4">
            <el-form-item :label="item.label" :prop="item.prop">
              <slot :name="'search_' + item.prop" :$model="searchData">
                <el-input :ref="item.prop+'Item'" v-if="item.type == 'input'" v-model="searchData[item.prop]" :clearable="!item.notEmpty"
                          :placeholder="item.placeholder" style="width: 80%"/>
                <el-input-number v-if="item.type == 'number'" v-model="searchData[item.prop]"
                                 :clearable="!item.notEmpty"
                                 :placeholder="item.placeholder" :controls="false" style="width: 80%"/>
                <el-select v-else-if="item.type == 'select'" v-model="searchData[item.prop]"
                           :clearable="!item.notEmpty" :multiple="item.selectOpt.multiple"
                           :placeholder="item.placeholder"
                           @change="handleSelectorChange(item.prop, item.selectOpt.subProp, item)"
                           @click.native="handleSelectorClick(item.prop)"
                           style="width: 80%" filterable>
                  <el-option v-for="(data, index1) in item.selectOpt.data" :key="index1"
                             :label="data[item.selectOpt.labelField]" :value="data[item.selectOpt.valueField]"/>
                </el-select>
                <!--          年时间控件-->
                <el-date-picker v-else-if="item.type == 'year'" v-model="searchData[item.prop]" type="year"
                                value-format="yyyy" :clearable="!item.notEmpty" style="width: 80%"/>
                <!--          月时间控件-->
                <el-date-picker v-else-if="item.type == 'month'" v-model="searchData[item.prop]" type="month"
                                value-format="yyyy-MM" :clearable="!item.notEmpty" style="width: 80%"/>
                <!--          日时间控件-->
                <el-date-picker v-else-if="item.type == 'date'" v-model="searchData[item.prop]" type="date"
                                value-format="yyyy-MM-dd" :clearable="!item.notEmpty" style="width: 80%"/>
                <!--          时间控件-->
                <el-date-picker v-else-if="item.type == 'datetime'" v-model="searchData[item.prop]" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss" :clearable="!item.notEmpty" style="width: 80%"/>
                <!--          级联-->
                <el-cascader v-else-if="item.type == 'cascader'" :options="item.options" show-all-levels="false"
                             :clearable="!item.notEmpty" style="width: 80%">
                </el-cascader>
              </slot>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <div style="display: inline-block">
          <!--        这里加样式是为了使没有按钮时仍然能够撑开-->
          <slot name="buttons" :selection="multiSelection"></slot>
          <!-------------------------------------------------------------按钮-->
          <el-button v-for="(item, index) in rButtons" :key="index" :type="item.type" size="mini"
                     @click="handleButtonClick(item.event)">{{ item.label }}
          </el-button>
        </div>
        <div style="display: inline-block;margin-left: auto;">
          <el-button type="text" @click="handleCollapse"
                     :icon="isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
                     v-if="realSearchConf.length > 4"
          >
            {{
              isCollapse ? '展开' : '收起'
            }}
          </el-button>
          <!-------------------------------------------------------------自定义列,查询项按钮-->
          <el-button size="mini" @click="handleCustomSearch"><i class="el-icon-setting"></i>自定义查询</el-button>
          <el-button size="mini" @click="handleCustomColumn"><i class="el-icon-setting"></i>自定义列</el-button>
          <el-button @click="getData('page')" icon="el-icon-search" type="primary">查找
          </el-button>
          <el-button @click="reset" icon="el-icon-refresh" type="primary" style="margin-left: 10px">重置</el-button>
        </div>
      </el-row>
    </div>
    <!-------------------------------------------------------------表格-->
    <el-table ref="table" :data="data" border highlight-current-row class="tablePaginationClass"
              @selection-change="handleSelectionChange" @expand-change="handleExpandChange"
              @sort-change="handleSortChange"
              :row-key=rowKey
              height="80px"
              @row-dblclick="handleDbclick" @row-click="handleRowClick"
              style="width: 100%;overflow: auto;flex-grow: 1;flex-shrink: 1;flex-basis: 300px"
              stripe
              :default-expand-all="realTableConf.defaultExpandAll"
              v-loading="loading"
              element-loading-background="rgba(0, 0, 0, 0.05)"
              :default-sort="realTableConf.defaultSort"
    >
      <!--是否多选表格-->
      <el-table-column v-if="realTableConf.multiple" type="selection"></el-table-column>
      <!--是否序号-->
      <el-table-column v-if="realTableConf.index" type="index" label="序号"></el-table-column>
      <!--是否展开-->
      <el-table-column v-if="realTableConf.expand" type="expand">
        <template v-slot="{ row, column, $index }">
          <slot name="expand" :row="row" :column="column" :$index="$index"></slot>
        </template>
      </el-table-column>

      <!--列数据-->
      <el-table-column v-for="(item, index) in realTableConf.columns" :key="index" :label="item.label" :prop="item.prop"
                       :width="item.width || ''" :sortable="item.sortable ? 'custom' : false" show-overflow-tooltip>
        <template v-slot="{ row, column, $index }">
          <slot :name="'table_' + item.prop" :row="row" :column="column" :$index="$index">
            <!--            如果父组件没有声明插槽,那么默认显示值-->
            {{ row[item.prop] }}
          </slot>
        </template>
      </el-table-column>
      <!--      操作列,仅显示link-->
      <el-table-column v-if="realTableConf.operation" label="操作" :width="realTableConf.operateWidth" fixed="right">
        <template v-slot="{ row, column, $index }">
          <div @click.stop="stopPropagation" style="display: inline-block">
            <slot name="operation" v-bind="{ row, column, $index }"></slot>
            <el-button v-for="(item, index) in rLinks" :key="index"
                       @click="handleButtonClick(item.event, row, column, $index)" type="text" size="small">
              {{ item.label }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--    table 下方插槽-->
    <template>
      <slot name="footer">
      </slot>
    </template>
    <!-------------------------------------------------------------分页组件-->
    <el-pagination
      v-if="realTableConf.paging"
      layout="sizes,total,prev, pager, next" @size-change="handleSizeChange"
      :page-sizes="[10, 20, 30, 40, 50]" :total="pagination.total" :current-page.sync="pagination.pageOn"
      @current-change="currentChange" @prev-click="prev" @next-click="next"
      :page-size.sync="pagination.pageSize"
      style="flex-basis: 32px; flex-grow: 0;flex-shrink: 0"
      width="100" align="center"/>

    <!--------------------------------------------------------------自定义列/查询的弹窗-->
    <el-dialog :visible.sync="customConfVisible" append-to-body width="650px" title="自定义"
               :before-close="handleCustomConfClose">
      <el-transfer filterable v-if="isCustomSearch" v-model="tmpSearchCol" :titles="['未选择', '已选择']" :data="searchCol">
      </el-transfer>
      <el-transfer filterable v-else v-model="tmpTableCol" :titles="['未选择', '已选择']" :data="tableCol">
      </el-transfer>
      <template #footer>
        <el-button type="primary" @click="customConfConfirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script src="./index.js">

</script>

<style scoped>
.tablePaginationClass {
  flex-grow: 1;
  position: relative;
  overflow: hidden !important;
  margin-bottom: 10px;
}

/* 设置滚动条宽度和高度 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  /* 横向滚动条 */
  height: 8px;
  /* 纵向滚动条 必写 */
}

/* 设置滚动条样式 */
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}


/*/deep/.el-table__fixed,*/
/*/deep/.el-table__fixed-left,*/
/*/deep/.el-table__fixed-right {*/
/*// 10 是我这里全局定义的滚动条的高度*/
/*height: calc(100% - 10px) !important;*/
/*}*/

/*/deep/.el-table__fixed-body-wrapper {*/
/*  height: 100% !important;*/
/*}*/

/*/deep/.el-table__fixed-body-wrapper .el-table__body {*/
/*  !*滚动条高度*!*/
/*// 10 是我这里全局定义的滚动条的高度*/
/*padding-bottom: 10px !important;*/
/*}*/
</style>
